<template>
  <h2>订单明细</h2>
  <br>
  <el-descriptions
      title="订单基础信息"
      :column="1"
      size="large"
  >
    <el-descriptions-item label="订单编号：">{{ bookID }}</el-descriptions-item>
    <el-descriptions-item label="实际付款：">{{ bookBasic.totalPrice }}</el-descriptions-item>
    <el-descriptions-item label="下单时间：">{{ bookBasic.time }}</el-descriptions-item>
    <el-descriptions-item label="订单状态：">{{ bookBasic.status }}</el-descriptions-item>
    <el-descriptions-item label="收货地区：">{{ CodeToText[addressInfo.province] }} / {{ CodeToText[addressInfo.city] }} / {{ CodeToText[addressInfo.area] }}</el-descriptions-item>
    <el-descriptions-item label="详细地址：">{{ addressInfo.addressDetail }}</el-descriptions-item>
    <el-descriptions-item label="收货号码：">{{ addressInfo.phoneNum }}</el-descriptions-item>
  </el-descriptions>
  <el-divider content-position="left">订单明细信息</el-divider>
  <el-table :data="bookItemList" ref="bookTableRef" style="width: 100%" >
    <el-table-column label="来源农场" width="270">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><location /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.merchantName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="参考图片" width="90">
      <template #default="scope">
        <div style="display: flex; align-items: center" >
          <el-image :src="this.staticResourcesUrl+scope.row.commodityImg" fit="cover" style="max-height: 50px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品名" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.commodityName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品单价" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.commodityPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品数量" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.commodityCounts }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品总价" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.commodityTotalPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="right">
          <template #default>
            <div>产品溯源</div>
          </template>
          <template #reference>
            <el-button @click="gotoOrigin(scope.row.commodityID)" size="small" type="primary" circle >溯</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/http/request";
import {getCurrentInstance, toRaw} from "vue";
const {useRoute, useRouter} = require("vue-router");
const {CodeToText} = require("element-china-area-data/dist/app");

export default {
  name: "BookDetails",
  watch: {
    '$route.fullPath'() {
      this.state = this.route.query.state;
    }
  },
  data() {
    return {
      bookBasic: {
        addressID: "",
        bookID: "",
        id: "",
        status: "",
        time: "",
        totalCount: "",
        totalPrice: "",
        userID: "",
      },
      bookItemList: [{
        commodityCounts: "",
        commodityID: "",
        commodityImg: "",
        commodityName: "",
        commodityPrice: "",
        commodityTotalPrice: "",
        merchantName: "",
      }],
      addressInfo: {
        addressDetail: "",
        area: "",
        city: "",
        collectionDate: "",
        id: "",
        phoneNum: "",
        province: "",
        userID: "",
      },
    }
  },
  methods: {
    getBookDetailsInfo() {
      request({
        url: "/book/getBookInfo",
        method: "post",
        data:{
          bookID: this.bookID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.bookBasic = toRaw(response.data.bookBasic);
          this.bookItemList = toRaw(response.data).bookItemList;
          this.addressInfo = toRaw(response.data).addressInfo;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    gotoOrigin(commodityID) {
      this.$router.push({
        name: 'BookOrigin',
        params: {
          commodityID: commodityID,
        },
      })
    },
  },
  setup() {
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    const route = useRoute();
    const router = useRouter();
    const bookID = route.params.bookID;
    return {
      CodeToText,
      staticResourcesUrl,
      route,
      router,
      bookID,
    }
  },
  mounted() {
    if (this.bookID) {
      this.getBookDetailsInfo();
    } else {
      this.$tipUtil.warningTip("未获取到订单编号，为您跳转至主页！");
      this.router.replace({
        path: '/',
      });
    }
  }
}
</script>

<style scoped>

</style>